import{d as r,e as d,a as p,P as o,Q as s,R as t,a5 as a,ab as m,a2 as f,S as g,$ as _}from"./elementPlusModules.js";import{_ as h}from"./index.js";import"./lodashModules.js";import"./vxeTableModules.js";const u={class:"demo-image"},v={class:"demonstration"},b="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",x=r({__name:"Base",setup(k){const n=["fill","contain","cover","none","scale-down"],l=d(`
<template>
  <div class="demo-image">
    <div v-for="fit in fits" :key="fit" class="block">
      <span class="demonstration">{{ fit }}</span>
      <el-image style="width: 100px; height: 100px" :src="url" :fit="fit" />
    </div>
  </div>
</template>

<script lang="ts" setup>
const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
const url =
  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
<\/script>

<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
`);return(i,y)=>{const c=p("el-image");return o(),s(a,null,[t("div",u,[(o(),s(a,null,m(n,e=>t("div",{key:e,class:"block"},[t("span",v,g(e),1),_(c,{style:{width:"100px",height:"100px"},src:b,fit:e},null,8,["fit"])])),64))]),f(i.$slots,"default",{html:l.value},void 0,!0)],64)}}}),z=h(x,[["__scopeId","data-v-3c9b49f6"]]);export{z as default};
